<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>api调试</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
.row{
	margin:0px;
}
</style>
</head>
<body>


<div class="container" style="margin:10px;width:95%">
 
		<div class="pull-left" style="width:70%;border-right:2px green solid">
			<form role="form" action="" id="form">
			  
				<div class="row">
				  <div class="col-md-2">
					  <div class="form-group">
							<select class="form-control" name="method" id="method">
								<option value="POST">POST</option>
								<option value="GET">GET</option>
							</select>
					  </div>
				  </div>
				  <div class="col-md-4">
					  <div class="form-group">
						<input type="text" class="form-control" id="url" name="url"  value="http://api.hardphp.com/index.php" autocomplete="off" placeholder="根地址">
					  </div>
				  </div>
				  <div class="col-md-4">
					  <div class="form-group">
						<input type="text" class="form-control" id="api" name="api" autocomplete="off" placeholder="接口地址">
					  </div>
				  </div>
				  
				  
				  
				  <div class="col-md-2">
					  <div class="form-group">
						<button class="btn btn-success" id ="submit" type="submit" >提交数据</button> 
					  </div>
				  </div>
				 
				</div>
				
				
				<h3 style="color:red">===========header参数==============</h3>
				
				<div class="row">
				   <div class="col-md-2">
						<h4>appid:</h4>
				  </div>
				  <div class="col-md-8">
					<div class="form-group">
						<input type="text" class="form-control" name="appid" value="" autocomplete="off" placeholder="x-access-appid">
					 </div>
				  </div>
			  
				</div>
				<div class="row">
				   <div class="col-md-2">
						<h4>token:</h4>
				  </div>
				  <div class="col-md-8">
					<div class="form-group">
						<input type="text" class="form-control" name="token" value="" autocomplete="off" placeholder="x-access-token">
					 </div>
				  </div>
			  
				</div>
			
				<h3 style="color:red">===========系统参数==============</h3>
				<div class="row">
				   <div class="col-md-2">
						<h4>签名signature:</h4>
				  </div>
				  <div class="col-md-8">
					<div class="form-group">
						<input type="text" class="form-control" name="signature" autocomplete="off" placeholder="签名">
					 </div>
				  </div>
			  
				  <div class="col-md-2">
						<button class="btn btn-primary addsign" type="button">生成签名</button>
				  </div>
				</div>
				
				<h3 style="color:red">===========应用参数==============</h3>
				<div class="row">
				 <div class="col-md-1">
					  <div class="form-group">
						<button class="btn btn-danger add" type="button">添加参数</button> 
					  </div>
				  </div>
				</div>
				
				<div class="row">
				  <div class="col-md-5">
					<div class="form-group">
						<input type="text" class="form-control" name="data[key][]" autocomplete="off" placeholder="参数名">
					 </div>
				  </div>
				  <div class="col-md-5">
					<div class="form-group">
						<input type="text" class="form-control"  name="data[value][]" autocomplete="off" placeholder="参数值">
					 </div>
				  </div>
				   
				  <div class="col-md-2">
						<button class="btn btn-info delete" type="button">删除参数</button> 
				  </div>
				</div>
				 
			</form>
 
		</div>
		
		<div class="pull-right" style="width:25%">
			<div class="row">
				<h3 style="color:red">===请求结果===</h3>
				<pre id="result"></pre>
			</div>
		
		</div>
	 
 
</div>

 

<script type="text/javascript">
	$(function () {
		
		$("#submit").click(function(){
		 
			$('#result').html(''); 
			   
			var url = $('#url').val();
			var api = $('#api').val();
			 
			var method = $('#method').val();
			if(url == '' || api == ''){
				alert('请填写接口地址');
				return false;
			}
			
    		$.ajax({
				type:method,
				url:'http://api.hardphp.com/index.php/index/test/getdata',
				data:$('#form').serialize(), 
				dataType:'json',
				success:success
			
			});
    		return false;

    		function success(data){
				 
				$('#result').html(JSON.stringify(data, null, 4));    
				 
    		}
    	});
	 
		
		$('.addsign').click(function(){
			 
			$.post(
				"http://api.hardphp.com/index.php/index/test/index",
				$('#form').serialize(),
				function(data){
					if(data.status){
    				 $('input[name="signature"]').val(data.data.sign);
					}else{
						alert(data.msg);
					}
				
				} ,"json");
			
		
		});
		

	
		$('.add').click(function(){
		
			var html ='<div class="row">';
				html +='<div class="col-md-5">';
				html +='<div class="form-group">';
				html +='<input type="text" class="form-control" name="data[key][]" autocomplete="off" placeholder="参数名">';
				html +='</div>';
				html +='</div>';
				html +='<div class="col-md-5">';
				html +='<div class="form-group">';
				html +='<input type="text" class="form-control"  name="data[value][]" autocomplete="off" placeholder="参数值">';
				html +='</div>';
				html +='</div>';
				html +='<div class="col-md-2">';
				html +='<button class="btn btn-info delete" type="button">删除参数</button>';
				html +='</div>';
				html +='</div>';
				
				
			$('#form').append(html);
		
		});
		
		$('#form').on('click','.delete',function(){
		
			$(this).closest('.row').remove();
		
		});
		
		
		
	});
		
	//表单提交
    	$(document)
	    	.ajaxStart(function(){
	    		$("button:submit").addClass("btn-success").removeClass('btn-success').attr("disabled", true);
	    	})
	    	.ajaxStop(function(){
	    		$("button:submit").removeClass("btn-success").addClass("btn-success").attr("disabled", false);
	    	});

</script>

</body>
</html>